<template>
  <n-modal
    v-model:show='showModal'
    preset='card'
    :title='title'
    :show-icon='false'
    class='w-800px'
  >
    <!-- 创建和编辑区域 -->
    <mycard v-if="editType === 'add' || editType === 'edit'" class='p-2'>
      <flexform
        ref='flexFormref'
        :formList='formList'
        :formValue='formValue'
      >
      </flexform>
    </mycard>
    <!-- 回显区域 -->
    <mycard v-if="editType === 'view'">
      <descriptions :infoList='_infoList'></descriptions>
    </mycard>

    <!-- 交互成功区域 -->
    <mycard v-if="editType === 'success'">
      <n-result status='success' title='成功' :description='resultText'>
      </n-result>
    </mycard>
    <!-- 交互失败区域 -->
    <mycard v-if="editType === 'error'">
      <n-result status='error' title='错误' :description='resultText'>
      </n-result>
    </mycard>
    <template #action>
      <div class='w-full flex justify-end items-center'>
        <n-button class='mx-1' v-if="editType === 'error'" @click='getreturn'>
          返回
        </n-button>
        <n-button class='mx-1' @click='handleClose'>关闭</n-button>
        <n-button v-if="editType === 'view'" type='primary' class='mx-1' @click='handleToEdit'>编辑</n-button>
        <n-button
          class='mx-1'
          v-if="editType === 'add' || editType === 'edit'"
          type='primary'
          @click='handleSave'
        >确定
        </n-button>
      </div>
    </template>
  </n-modal>
</template>


<script setup name='Edit' lang='ts'>
import { useMessage } from 'naive-ui'
import { openAndClose } from '../../../hooks/useEdit'
import guiling from '../../../util/guiling'
import { ref, watch, defineExpose, defineEmits, computed } from 'vue'
import http from '../../../request/request'

const flexFormref = ref<any>(null) // 表单组件
const formValue = ref<any>({}) // 表单数据
const viewValue = ref<any>({}) // 查看数据
const emit = defineEmits(['close'])
// 自定义重置组件的方法
const reset = () => {
  formValue.value = guiling(formValue.value)
}
// 自定义初始化需要执行的方法
const chushihua = (data: any, edittype: 'add' | 'edit' | 'view' | '') => {
  if (data) {
    if (edittype === 'view') {
      viewValue.value = data
    } else {
      formValue.value = data
    }
  }
}
// 从钩子中结构出需要的函数和属性
const {
  showModal,
  editType,
  resultText,
  init,
  handleClose,
  getsuccess,
  getfaild,
  title,
} = openAndClose(chushihua, reset, '', emit)


// 表单配置
const formList = ref([
  {
    label: '字典名称',
    key: 'name',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入字典名称',
        trigger: ['input', 'change', 'blur'],
      },
      {
        max: 200,
        min: 2,
        message: '请输入2-200位的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '描述',
    key: 'desc',
    type: 'textarea',
  },
])
const adddisabled = ref([])
const editdisabled = ref([])
watch(editType, () => {
  if (editType.value === 'add') {
    formList.value.forEach((item: any) => {
      if (adddisabled.value.includes(item.key as never)) {
        item.disabled = true
      } else {
        item.disabled = false
      }
    })
  } else if (editType.value === 'edit') {
    formList.value.forEach((item: any) => {
      if (editdisabled.value.includes(item.key as never)) {
        item.disabled = true
      } else {
        item.disabled = false
      }
    })
  }
})

// 点击确定
const handleSave = () => {
  if (formValue.value.id) {
    flexFormref.value && flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value && flexFormref.value.jiaoyan(createfunc)
  }
}

const createfunc = (data: any) => {
  http.zidianadd(data).then((res: any) => {
    if (res.data.code === 0) {
      getsuccess('创建成功')
    }
  }).catch(err => {
    getfaild(err || '创建失败')
  })

}

const updatefunc = (data: any) => {
  http.zidianupdate(data).then((res: any) => {
    if (res.data.code === 0) {
      getsuccess('修改成功')
    }
  }).catch(err => {
    getfaild(err || '修改失败')
  })
}

// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = 'edit'
  } else {
    editType.value = 'add'
  }
  resultText.value = ''
}


const infoList = ref([
  { label: '名称', key: 'name' },
  {
    label: '创建时间', key: 'createdTime', render: (time: string) => {
      return new Date().toMyString(time)
    },
  },
  {
    label: '更新时间', key: 'changeTime', render: (time: string) => {
      return new Date().toMyString(time)
    },
  },
  {label: '描述', key: 'desc', },
])
const _infoList = computed(() => {
  return infoList.value.map((item: any) => {
    return { ...item, value: item.render ? item.render(viewValue.value[item.key]) : viewValue.value[item.key] }
  })
})

// 点击切换到编辑状态
const handleToEdit = () => {
  formValue.value = { ...viewValue.value, parent: viewValue.value?.parent?.id }
  editType.value = 'edit'
}

// 抛出属性和方法
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>
